<template>
    <div class="handle-event-info">
        <el-form ref="elForm" size="small" label-width="100px" label-position="left">
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="事件名称" prop="eventName">
                        <span>{{ event.name }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="6">
                    <el-form-item label="事件类型" prop="eventType">
                        <dict-tag :options="dict.type.usetypecode_dict" :value="event.type" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="事件等级" prop="event_level">
                        <dict-tag :options="dict.type.eventlevelcode_dict" :value="event.level" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发生地" prop="eventLocaltion">
                        <span>{{ event.location }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="发生时间" prop="eventTime">
                        <span>{{ event.findTime }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="位置坐标" prop="eventLocaltion">
                        <span>{{ event.coordinate }}</span>
                        <el-button size="medium" type="text" @click="showInMap" icon="el-icon-map-location" style="margin-left: 15px" v-if="event.coordinate != ''">地图查看</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="事故简况" prop="contentTitle">
                        <span>{{ event.briefIntroduction }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="影响范围" prop="impactArea">
                        <span>{{ event.coverage }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="事件起因" prop="surroundings">
                        <span>{{ event.initialReason }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="基本过程" prop="eventCause">
                        <span>{{ event.basicProcess }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <map-view ref="mapView" />
    </div>
</template>
<script>
import MapView from "../components/MapView.vue";
export default {
    name: "Handleevent",
    dicts: ["usetypecode_dict", "eventlevelcode_dict"],
    components: {
        MapView,
    },
    props: {
        event: {
            type: Object,
            default: {},
        },
    },
    methods: {
        showInMap() {
            this.$refs.mapView.showMap({
                eventInfo: {
                    eventCenter: this.event.coordinate.split(","),
                    eventName: this.event.name,
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped></style>
